<template>
  <div class="content">
    <div>修改公海客户</div>
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="客户名称" required prop="customer_name">
        <el-input v-model="ruleForm.customer_name"></el-input>
      </el-form-item>
      <el-form-item label="联系人" prop="contact_name">
        <el-input v-model="ruleForm.contact_name"></el-input>
      </el-form-item>
      <el-form-item label="手机号码" required prop="phone">
        <el-input v-model="ruleForm.phone"></el-input>
      </el-form-item>
      <el-form-item label="QQ">
        <el-input v-model="ruleForm.qq"></el-input>
      </el-form-item>
      <el-form-item label="所在地区">
        <el-cascader
          size="large"
          :options="ruleForm.options"
          v-model="ruleForm.selectedOptions"
          @change="handChange"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="详细地址" prop="address">
        <el-input v-model="ruleForm.address"></el-input>
      </el-form-item>
      <el-form-item label="客户类型">
        <el-select v-model="ruleForm.typevalue" placeholder="请选择">
          <el-option
            v-for="(item, index) in Customertype"
            :key="index"
            :label="item.dic_Name"
            :value="item.dic_Name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="客户来源">
        <el-select v-model="ruleForm.source" placeholder="请选择">
          <el-option
            v-for="(item, index) in Customerorigin"
            :key="index"
            :label="item.dic_Name"
            :value="item.dic_Name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="附件" class="form-1">
        <el-upload
          class="upload-demo"
          action="http://118.190.210.28:8080"
          :on-change="handleChange"
          :file-list="fileList"
          :auto-upload="false"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="录入时间">
        <el-date-picker
          type="date"
          placeholder="选择日期"
          v-model="ruleForm.date"
          style="width: 100%"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="备注" class="form-1">
        <el-input type="textarea" v-model="ruleForm.remark"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')"
          >保存</el-button
        >
        <el-button type="info" @click="resetForm('ruleForm')">关闭</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { provinceAndCityDataPlus, CodeToText } from "element-china-area-data";
import { poolChangeAxios } from "../../../http/apis/customerseasApi";
import { mapActions } from "vuex";
import { mapState } from "vuex";
export default {
  name: "AddPool",
  computed: {
    ...mapState("customerSeasStore", ["Customertype", "Customerorigin"]),
  },
  data() {
    return {
      ruleForm: {
        customer_name: "",
        contact_name: "",
        phone: "",
        qq: "",
        address: "",
        remark: "",
        options: provinceAndCityDataPlus,
        selectedOptions: "",
        typevalue: "",
        source: "",
      },
      fileList: [],
      rules: {
        customer_name: [
          { required: true, message: "请输入", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择联系人", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写", trigger: "blur" }],
      },
    };
  },
  methods: {
    ...mapActions(["customerSeasStore/DicListActions"]),
    submitForm(formName) {
      //保存
      this.$refs[formName].validate((valid) => {
        if (valid) {
          console.log(valid);
          let obj = {
            address: this.ruleForm.address,
            attachment_url: "string",
            city: {
              city_id: 0,
              city_name: this.ruleForm.selectedOptions,
            },
            consultation: "string",
            contact: [
              {
                contact_birthday: "2021-12-09",
                contact_email: "string",
                contact_id: 0,
                contact_name: this.ruleForm.customer_name,
                contact_phone: this.ruleForm.phone,
                contact_qq: this.ruleForm.qq,
                contact_remark: this.ruleForm.remark,
                contact_sex: 0,
                contact_wechat: "string",
                customer_id: 0,
                postion: "string",
              },
            ],
            customer_id:this.$route.query.customer_id,
            customer_name: this.ruleForm.customer_name,
            enable_protected: 0,
            origin: this.ruleForm.source || "",
            post_code: "string",
            protected_deadline: 0,
            remark: this.ruleForm.remark,
            status: 0,
            type: this.ruleForm.typevalue,
          };
          console.log(obj);
          poolChangeAxios(obj)
            .then((res) => {
              console.log("修改请求成功:",res);
              this.$message({
                type: "success",
                message: "修改成功",
              });
              this.ruleForm = {
                customer_name: "",
                contact_name: "",
                phone: "",
                qq: "",
                options: provinceAndCityDataPlus,
                selectedOptions: "",
                address: "",
                typevalue: "",
                source: "",
                remark: "",
              };
            })
            .catch(() => {
              this.$message({
                type: "error",
                message: "修改失败",
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      //关闭
      this.$refs[formName].resetFields();
      this.$router.back();
    },
    handleChange(file, fileList) {
      //附件选择
      this.fileList = fileList.slice(-3);
    },
    handChange() {
      //地区选择
      var loc = "";
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]];
      }
      alert(loc);
    },
  },
  created() {
    // 获取数据
    const Info = this.$route.query.poollistMsg;
    console.log(Info);
    this.ruleForm.customer_name = Info.customer_name;
    this.ruleForm.contact_name = Info.contact_name;
    this.ruleForm.phone = Info.contact_phone;
    this.ruleForm.qq = Info.qq;
    this.ruleForm.source = Info.origin;
    this.ruleForm.date = Info.import_Date;
    this.ruleForm.remark = Info.remark;
    this.ruleForm.typevalue = Info.type;
    this["customerSeasStore/DicListActions"]("客户类型")
      .then(() => {
        console.log("返回客户类型数据成功");
      })
      .catch((err) => {
        console.log("请求失败", err);
      });
    this["customerSeasStore/DicListActions"]("客户来源")
      .then(() => {
        console.log("返回客户来源数据成功");
      })
      .catch((err) => {
        console.log("请求失败", err);
      });
  },
};
</script>

<style lang="scss" scoped>
form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 1100px;
  margin-top: 20px;
}
.el-form-item {
  width: 500px;
}
.form-1 {
  width: 1000px;
}
.el-input {
  width: 200px;
}
.receiveaddress {
  width: 500px;
}
.btn {
  margin-left: 10px;
  box-sizing: border-box;
}
</style>